<template>
  <aside class="left-aside-page u-f">
    <div class="tab-box">
      <div
        class="list u-f u-f-column u-f-ac u-f-jc"
        :class="[current === 1 ? 'active' : '']"
        @click="changeCurrent(1)"
      >
        <FileOutlined class="a-icon" />
        <div class="text">所有页面</div>
      </div>
      <div
        class="list u-f u-f-column u-f-ac u-f-jc"
        :class="[current === 2 ? 'active' : '']"
        @click="changeCurrent(2)"
      >
        <AppstoreOutlined class="a-icon" />
        <div class="text">基础组件</div>
      </div>
      <div class="list u-f u-f-column u-f-ac u-f-jc">
        <MobileOutlined class="a-icon" />
        <div class="text">单页模板</div>
      </div>
    </div>
    <div class="component-box">
      <!-- 所有页面 -->
      <page-list v-show="current === 1"></page-list>
      <!-- 基础组件 -->
      <basic-components v-show="current === 2"></basic-components>
    </div>
  </aside>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import {
  AppstoreOutlined,
  MobileOutlined,
  FileOutlined,
} from '@ant-design/icons-vue'

import basicComponents from './basic-components.vue'
import pageList from './page-list.vue'

export default defineComponent({
  name: 'AppLeftAside',
  components: {
    AppstoreOutlined,
    MobileOutlined,
    FileOutlined,
    basicComponents,
    pageList,
  },
  setup() {
    const current = ref(1)

    const changeCurrent = (num: number) => {
      if (current.value !== num) current.value = num
    }

    return {
      current,
      changeCurrent,
    }
  },
})
</script>

<style scoped lang="less">
.left-aside-page {
  width: 360px;
  height: 100%;
  background-color: #ffffff;
  box-shadow: 4px 6px 6px 0 rgba(31, 50, 88, 0.08);
  box-sizing: border-box;
  .tab-box {
    width: 80px;
    border-right: 1px solid #ccd5db;
    box-sizing: border-box;
    .list {
      cursor: pointer;
      width: 100%;
      height: 80px;
      .a-icon {
        font-size: 24px;
      }
      .text {
        font-size: 12px;
        margin-top: 4px;
      }
      &.active,
      &:hover {
        background-color: #1890ff;
        .a-icon,
        .text {
          color: #ffffff;
        }
      }
    }
  }
  .component-box {
    width: 280px;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    &::-webkit-scrollbar {
      width: 0;
    }
  }
}
</style>